<template>
  <footer class="site-footer">
    <div class="footer-inner">
      <!-- 品牌 -->
      <div class="footer-col">
        <div class="footer-brand">
          <i class="fa fa-coffee"></i>
          <span>中国云咖</span>
        </div>
        <p>精选全球优质咖啡豆，为您带来纯粹的味蕾享受。</p>
        <div class="footer-social">
          <a ><i class="fab fa-weibo"></i></a>
          <a ><i class="fab fa-weixin"></i></a>
          <a ><i class="fab fa-instagram"></i></a>
          <a ><i class="fab fa-youtube"></i></a>
        </div>
      </div>

      <!-- 快速链接 -->
      <div class="footer-col">
        <h4>快速链接</h4>
        <ul>
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/all-coffees">全部咖啡豆</router-link></li>
          <li><router-link to="/coffee-origin">咖啡分类</router-link></li>
          <li><router-link to="/merchandise">咖啡周边</router-link></li>
          <li><router-link to="/about">关于我们</router-link></li>
        </ul>
      </div>

      <!-- 帮助中心 -->
      <div class="footer-col">
        <h4>帮助中心</h4>
        <ul>
          <li><a >购物指南</a></li>
          <li><a >支付方式</a></li>
          <li><a >配送信息</a></li>
          <li><a >退换政策</a></li>
          <li><a >常见问题</a></li>
        </ul>
      </div>

      <!-- 联系信息 -->
      <div class="footer-col">
        <h4>联系我们</h4>
        <ul class="contact-list">
          <li><i class="fa fa-map-marker"></i> 山西省晋中市榆次区信思智学教育科技有限公司</li>
          <li><i class="fa fa-phone"></i> 155-3686-3137（周一至周日 9:00-21:00）</li>
          <li><i class="fa fa-envelope"></i> xszx@spt2505.com</li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      版权所有 © 中国云咖 2025 | 京ICP备12345678号
    </div>
  </footer>
</template>

<style scoped>
/* 底部整体 */
.site-footer {
  margin-top: 80px;
  background: #3E2723;
  color: #ccc; /* 统一为灰色文字 */
  padding: 48px 0 24px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  padding: 0 16px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
.footer-brand i {
  color: #D2B48C;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .3s;
  color: #ccc; /* 图标与文字同色 */
}
.footer-social a:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
}

.footer-col h4 {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #ccc;
}
.footer-col li a {
  color: #ccc;
  text-decoration: none;
}
.footer-col li a:hover {
  color: #fff;
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size: 14px;
  color: #aaa;
}
</style>